<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>

<html:html lang="true">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Dinotrack</title>
        <link href="welcomeDinotrackStyle.css" rel="stylesheet" type="text/css" />
        <link href="busquedaStyle.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
        <link rel="stylesheet" href="css/zen.css">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>   
        <script type="text/javascript" src="js/jquery.rotate.js"></script>
        <script type="text/javascript" src="js/jquery.grab.js"></script> 
        <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
        <script type="text/javascript" src="js/zen.js"></script>
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <script type="text/javascript">
            <!--
                    
            function recargar(){
                var idCanciones = <%=session.getAttribute("idCanciones")%>;
            <% session.setAttribute("idCanciones", null);%>
                    for(i=0;i<idCanciones.length;i++){
                        agregarCancion(idCanciones[i]);
                    }
                    /*$.get("/WebDinotrack/lista.do", { recargar: "si" },
                            rearmarLista
                        );*/        
                }
                    
                function rearmarLista(data){
                    var cantidad=data.getElementsByTagName("cantidad");
                    var album=data.getElementsByTagName("album");
                    var cancion=data.getElementsByTagName("cancion");
                    var artista=data.getElementsByTagName("artista");
                    var rowAlbum=document.getElementById("filaAlbum");
                    var rowCancion=document.getElementById("filaCancion");
                    var rowArtista=document.getElementById("filaArtista");
                        
                    for(i=0;i<cantidad.length;i++){
                        var cell=document.createElement("td");
                        cell.setAttribute("id", "albumCellListaRepr"+cantidad[i]);
                        cell.innerHTML=album[i];
                        cell.indice=rowAlbum.childNodes.length;
                        rowAlbum.appendChild(cell);

                        cell=document.createElement("td");
                        cell.setAttribute("id", "cancionCellListaRepr"+cantidad[i]);
                        cell.innerHTML=cancion[i];
                        rowCancion.appendChild(cell);

                        cell=document.createElement("td");
                        cell.setAttribute("id", "artistaCellListaRepr"+cantidad[i]);
                        cell.innerHTML=artista[i];
                        rowArtista.appendChild(cell);
                    }
                }
                    
                function agregarCancion(id){
                    $.get("/WebDinotrack/lista.do", { idcancion: id },
                    preparaRespuesta
                );
                }
	             
                function preparaRespuesta(data){
                    var cantidad = $(data).find("cantidad").text();
                    var album = $(data).find("album").text();
                        
                    var row=document.getElementById("filaAlbum");
                    var cell=document.createElement("td");
                    cell.setAttribute("id", "albumCellListaRepr"+cantidad);
                    cell.innerHTML=album;
                    cell.indice=row.childNodes.length;
                    row.appendChild(cell);
                        
                        
                    row=document.getElementById("filaCancion");
                    var cancion = $(data).find("cancion").text();
                    cell=document.createElement("td");
                    cell.setAttribute("id", "cancionCellListaRepr"+cantidad);
                    cell.innerHTML=cancion;
                    row.appendChild(cell);
                        
                    row=document.getElementById("filaArtista");
                    var artista = $(data).find("artista").text();
                    cell=document.createElement("td");
                    cell.setAttribute("id", "artistaCellListaRepr"+cantidad);
                    cell.innerHTML=artista;
                    row.appendChild(cell);
                }
                    
                function quitarCancion(name){
                        
                    var cell=document.getElementById("album"+name);
                    var indice=cell.indice;
                    $.get("/WebDinotrack/lista.do", { indice: indice }
                );
                    var padre=cell.parentNode;
                    for(indice;indice<padre.childNodes.length;indice++){
                        padre.childNodes[indice++].indice=indice--;
                    }
                    padre.removeChild(cell);
                        
                    cell=document.getElementById("cancion"+name);
                    padre=cell.parentNode;
                    padre.removeChild(cell);
                        
                    cell=document.getElementById("artista"+name);
                    padre=cell.parentNode;
                    padre.removeChild(cell);
                        
                }
                -->
        </script>
    </head>

    <body>
        <div class="contenedor">

            <div class="Encabezado">

                <div id="iconos">
                    <ul>
                        <li><g:plusone></g:plusone></li>
                        <li><a href="http://twitter.com/share" class="twitter-share-button" data-text="Escucha este tema en Dinotrack!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
                        <li><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=215024615208148&amp;xfbml=1"></script><fb:like href="" send="false" width="55" layout="button_count" show_faces="false" action="recommend" font=""></fb:like></li>
                    </ul>
                </div>

            </div>

            <div class="CentralIzquierda">
                <table>
                    <tbody>
                    <th colspan="4" class="topten" width="240px">
                        Top Ten
                    </th>
                    <tr class="topten" >
                        <td width="10px">1</td>
                        <td width="120px">el último ataque</td>
                        <td width="120px">rata blanca</td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">2</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">3</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">4</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">5</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">6</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">7</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">8</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">9</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    <tr class="topten">
                        <td width="10px">10</td>
                        <td width="120px"></td>
                        <td width="120px"></td>
                        <td width="10px">+</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div id="Central">

                <div class="barraBusqueda">
                    <div id="searchwrapper"><html:form action="/busqueda">
                            <div class="searchbox_submit">
                                <html:image src="img_busqueda/edit-find.png"/>
                            </div>
                            <div class="opciones">
                                <html:radio name="BusquedaForm" property="opcionBusqueda" value="0"/><image src="img_busqueda/cancion.png"/>
                                <html:radio name="BusquedaForm" property="opcionBusqueda" value="1"/><image src="img_busqueda/artista.png"/>
                                <html:radio name="BusquedaForm" property="opcionBusqueda" value="2"/><image src="img_busqueda/album.png"/>
                                <html:radio name="BusquedaForm" property="opcionBusqueda" value="3"/><image src="img_busqueda/todos.png"/>
                            </div>
                            <html:text property="buscar" styleClass="searchbox"/>
                        </div>

                    </div>
                    <div class="tabla">
                        <table class="Canciones">
                            <th>Cancion</th>
                            <th>Artista</th>
                            <th>Album</th>
                            <th>Tiempo</th>
                            <th>Agregar</th> 
                            <tbody>
                                <bean:write name="BusquedaForm" property="resultadoBusqueda" filter="false" />
                            </tbody>
                        </table>  
                    </div>
                    <div class="searchbox_submit">
                        <html:image src="img_busqueda/edit-find.png"/>   
                    </div> 
                </html:form>

            </div>


            <div class="CentralDerecha">
                <div class="Login">
                    <html:form action= "/login">
                        <script type="text/javascript">
                            function success_login()
                            {
                                var value= parseInt(<bean:write name="LoginForm" property="loginResult" filter="false"/>);
                
                                if(value == 0) {
                                    // alert("login - "+value+" - "+'<%= session.getAttribute("USER")%>');
                                    document.getElementById('loginOff').style.display='none';
                                    document.getElementById('loginOn').style.display='block';
                                }
                                else {
                                    // alert("no login - "+value+" - "+'<%= session.getAttribute("USER")%>');
                                    document.getElementById('loginOff').style.display='block';
                                    document.getElementById('loginOn').style.display='none';
                                }
                            }
            
                            window.onload=success_login;
                        </script> 
                        <%--<div id="login-box-field"></div>
                        <div id="login-box-field"></div>
                        <span class="login-box-options"><a href="#" style="margin-left:30px;"></a>
                            <br><a href="#" style="margin-left:30px;"></a></span> --%>

                        <div id="loginOff">
                            <table class="tbLogin" onload="success_login()">
                                <tbody>
                                    <tr>
                                        <td class="tdLogin" colspan="2"><html:text styleClass="form-login" property="usuario"></html:text></td>
                                        </tr>
                                        <tr>
                                            <td class="tdLogin" colspan="2"><html:password styleClass="form-login" property="contrasenia"></html:password></td>
                                        </tr>
                                        <tr>
                                            <td class="tdButton"><html:submit styleClass="awesome" value="Login" property="login"/></td>
                                        <td class="tdButton"><a href="#"> Olvide mi contraseña</a><br><a href="register.jsp">Registrate</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div id="loginOn">
                            <table class="tbLoginOn" onload="success_login()">
                                <tbody>
                                    <tr>
                                        <td class="tdLogin"><html:text styleClass="form-login" property="usuario"></html:text></td>
                                        </tr>
                                        <tr>
                                            <td class="tdButton"><html:submit styleClass="awesome" value="Cerrar Sesión" property="logout"/></td>
                                    </tr>
                                    <tr>
                                        <td class="tdButton"><html:submit styleClass="awesome" value="Panel de Control" property="controlPanel"/></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </html:form> 
                </div>
            </div>

            <div class="Reproduccion">
                <div class="OpcionesListaReproduccion">
                    <img src="img_lista_reproduccion/save_list.png"/>
                </div>
                <div class="ListaReproduccion">
                    <table id="listaReproduccion" class="tbLista">
                        <tr id="filaAlbum"></tr>
                        <tr id="filaCancion"></tr>
                        <tr id="filaArtista"></tr>
                    </table>
                </div>
                <div class="ControlesMusicPlayer"> 
                    <div id="zen">
                        <span class="player"></span>
                        <span class="circle"></span>
                        <span class="progress"></span>
                        <span class="buffer"></span>
                        <span class="drag"></span>
                        <div class="button">
                            <span class="icon play"></span>
                            <span class="icon pause"></span>
                        </div>
                    </div>  
                </div>

            </div>

        </div>
    </body>
</html:html>
